<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../static/img/icon-Get-into@3.png" class="back" @click="goBack"></image>
			<view class="header-center">
				<text class="header-title">编辑团队成员</text>
			</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="box">
			<view class="form-list">
				<view class="form-item" @click="selectTeam">
					<text class="label">选择团队：</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请选择所属团队" 
						v-model="groupName"
						disabled
					/>
					<image class="arrow-icon" src="../../static/img/icon-Get-into@3x.png"></image>
				</view>
				
				<view class="form-item">
					<text class="label">成员邀请码：</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请填写邀请码" 
						v-model="inviteCode"
					/>
				</view>
				
				<view class="form-item">
					<text class="label">成员名称：</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请填写成员名称" 
						v-model="memberName"
					/>
				</view>
			</view>
			
			<text class="tip-text">添加的成员若未实名，请自行备注成员名称</text>
			
			<button class="submit-btn" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import { investmentApi } from '../../api/index.js'
	
	export default {
		data() {
			return {
				groupId: '',
				groupName: '',
				inviteCode: '',
				memberName: ''
			}
		},
		
		onLoad() {
			// 获取存储的团队信息
			this.groupId = uni.getStorageSync('sgroup_id') || '';
			this.groupName = uni.getStorageSync('sgroup_name') || '';
		},
		
		onShow() {
			// 页面显示时重新获取团队信息（从选择团队页面返回时）
			this.groupId = uni.getStorageSync('sgroup_id') || '';
			this.groupName = uni.getStorageSync('sgroup_name') || '';
		},
		
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 选择团队
			selectTeam() {
				uni.navigateTo({
					url: './change_team'
				});
			},
			
			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.groupName) {
					uni.showToast({
						title: '请选择所属团队！',
						icon: 'none'
					});
					return;
				}
				
				if (!this.inviteCode.trim()) {
					uni.showToast({
						title: '请填写邀请码!',
						icon: 'none'
					});
					return;
				}
				
				if (!this.memberName.trim()) {
					uni.showToast({
						title: '请填写成员名称!',
						icon: 'none'
					});
					return;
				}
				
				// 调用API添加成员
				this.addMember();
			},
			
			// 添加成员API调用
			async addMember() {
				try {
					const result = await investmentApi.addTeamMember({
						group_id: this.groupId,
						invite_code: this.inviteCode.trim(),
						member_name: this.memberName.trim()
					});
					
					if (result.r === 0) {
						uni.showToast({
							title: '添加成员成功！',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: result.msg || '添加成员失败！',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误，请重试！',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #EEEEEE;
		min-height: 100vh;
	}
	
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		z-index: 999;
	}
	
	.back {
		width: 32rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}
	
	.header-center {
		flex: 1;
		text-align: center;
		margin-right: 62rpx; /* 平衡左侧返回按钮的宽度 */
	}
	
	.header-title {
		font-size: 36rpx;
		color: #333;
	}
	
	.box {
		margin-top: 88rpx;
		padding: 0 30rpx;
	}
	
	.form-list {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.form-item {
		position: relative;
		height: 90rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}
	
	.label {
		color: #4B4B4B;
		font-size: 30rpx;
		width: 220rpx;
	}
	
	.input {
		flex: 1;
		color: #8F8F8F;
		font-size: 28rpx;
		height: 40rpx;
	}
	
	.arrow-icon {
		width: 16rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	
	.tip-text {
		color: #FF1E00;
		font-size: 26rpx;
		padding: 30rpx 0;
		display: block;
	}
	
	.submit-btn {
		width: 690rpx;
		height: 90rpx;
		background-color: #FF9600;
		color: #FEFEFF;
		font-size: 36rpx;
		border-radius: 10rpx;
		border: none;
		margin-top: 30rpx;
	}
	
	.submit-btn:active {
		background-color: #e6860a;
	}
</style>